<template>
    <label class="pe-radio"
        :class="[border ? 'pe-radio-border' : '', sizeArr.includes(getSize()) ? `pe-radio-${getSize()}` : '', getDisabled() ? 'pe-radio-disabled' : '', modelValue === value && !getDisabled() ? 'pe-radio-active' : '']">
        <div class="pe-radio-item" :class="[modelValue === value ? 'pe-radio-checked' : '']">
            <input class="pe-radio-inp" type="radio" v-model="modelValue" :value="value"
                :name="radioName" :disabled="getDisabled()" @click.stop>
            <div class="pe-radio-cir"></div>
        </div>
        <div :style="{ color: modelValue === value && !getDisabled() ? 'var(--pe-color-primary)' : '' }">
            <slot>{{ label }}</slot>
        </div>
    </label>
</template>

<script setup lang="ts">
import { Ref, inject } from "vue"

const modelValue: any = inject("pe-radio-value")

/**
 * @param label 单选框的 label 
 * @param value 单选框的值
 * @param size 单选框的尺寸
 * @param disabled 是否禁用单选框
 * @param border 是否显示边框
 */
interface Props {
    label?: string | boolean | number,
    value: string | boolean | number,
    size?: 'default' | 'large' | 'small',
    disabled?: boolean,
    border?: boolean,
}

const props = withDefaults(defineProps<Props>(), {
    disabled: false,
    border: false
})

const getSize = () => {
    const tempSize: Ref<'default' | 'large' | 'small'> = inject("pe-radio-size")!
    if (props.size) {
        if (props.size !== tempSize.value) {
            return props.size
        }
    }
    return tempSize.value
}

const getDisabled = () => {
    const tempDisabled: Ref<boolean> = inject("pe-radio-disabled")!
    if (tempDisabled.value) {
        return true
    } else {
        if (props.disabled) return true
    }
    return false
}

const sizeArr = ["large", "small"]

const radioName: Ref<string> = inject("pe-radio-id")!
</script>

<script lang="ts">
export default {
    name: "pe-radio"
}
</script>
